/*
 * @Author: shaohh
 * @Date: 2022-09-07 17:20:23
 * @Last Modified by: shaohh
 * @Last Modified time: 2022-11-07 14:53:00
 */

<template>
  <!-- v-show="total && total>pageRequest.page_size" -->
  <div  class="com-container-card">
    <el-pagination
      ref="pagination"
      class="elpage"
      background
      :current-page="pageRequest.current"
      :page-sizes="sizes"
      :page-size="pageRequest.size"
      :layout="layout"
      :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>
<script>

export default {
  components: {
  },
  props: {
    total: {
      type: Number,
      default: 0,
    },
    sizes: {
      type: Array,
      default: () => [5, 10, 15, 20],
    },
    defaultsize: {
      type: Number,
      default: 0,
    },
    showSizes: {
      type: Boolean,
      default: true,
    },
    scrollTop: {
      type: Number,
      default: 50,
    },
  },
  data () {
    return {
      pageRequest: { size: 10, current: 1 },
      layout: 'total,sizes,prev, pager, next,jumper',
    }
  },
  created () {
    if (this.defaultsize) {
      this.pageRequest.size = this.defaultsize
    }
    if (!this.showSizes) {
      this.layout = this.layout.replace('sizes,', '')
    }
  },
  methods: {
    initRequest () {
      this.$set(this.pageRequest, 'size', 1)
      return this.pageRequest
    },
    sizeChange (size) {
      this.pageRequest.size = size
      this.change()
    },
    pageChange (currentPage) {
      this.pageRequest.current = currentPage
      this.change()
    },
    handleScrollTop () {
      if (this.scrollTop > 0) {
        console.log('jinlailma9999999')
        document.documentElement.scrollTop = this.scrollTop
      }
    },
    change () {
      this.handleScrollTop()
      this.$emit('change', this.pageRequest)
    },
  },
}
</script>
<style lang='scss' scoped>
.com-container-card {
  margin-top:10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  // margin-bottom: 30px;
  // .elpage ::v-deep .el-input__inner:focus {
  //   box-shadow: 0 0 0 0 !important;
  // }
}
.el-pagination{
//   font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
//   font-weight: 400;
//   color: #293957;
  line-height: 22px;

  .el-input .el-pagination__editor .is-in-pagination{
    width: 62px;
    height: 32px;
    background: #F1F7F8;
    border-radius: 4px 4px 4px 4px;
  }
}
::v-deep .el-pagination.is-background .el-pager li{
  border-radius: 4px;
  background: none !important;
}
::v-deep .el-pagination__sizes{
  width: 107px;
}
::v-deep .el-pagination.is-background .el-pager .active{
  // color:#409EFF !important
}
::v-deep.el-pagination .el-select .el-input .el-input__inner{
  border-radius: 4px;
}
</style>
